<template>
    <div class="p-picker-vehicle">
        <!--<v-field-->
        <!--type="select"-->
        <!--v-model="currentValue"-->
        <!--:options="options"-->
        <!--:placeholder="$t('lang.pleaseSelect')"-->
        <!--@change="handleChange"-->
        <!--/>-->
        <!--<el-input v-model="currentValue" size="small" />-->
        <el-autocomplete
            v-model="currentValue"
            :select-when-unmatched="false"
            :fetch-suggestions="querySearch"
            :trgger-on-focus="false"
            @select="handelSelect"
            @change="handelChange"
        ></el-autocomplete>
        <i class="icon icon-target" v-if="target" :class="[isCurrent ? 'current' : '']" @click="handlePicker" />
    </div>
</template>

<script>
import * as api from '../core/api.js';
import * as Chef from '../core/Chef.js';
import * as enums from '../store/status-enums.js';
import { mapState } from 'vuex';
import bus from '../utils/Eventbus.js';
import i18n from '../lang/index.js';
const $t = i18n.global.t;
// import vField from '../vendors/v-field.vue';
export default {
    name: 'p-picker-vehicle',
    props: {
        value: {
            // eslint-disable-next-line vue/require-prop-type-constructor
            type: [String, Number],
            default: ''
        },
        target: {
            type: Boolean,
            default: false
        }
    },
    // components: { vField },
    data() {
        return {
            currentValue: this.value,
            options: [],
            isCurrent: false
        };
    },
    computed: {
        ...mapState({
            openedBoxes: state => state.businessStatus.openedBoxes,
            selectedVehicles: state => state.businessStatus.selectedVehicles
        })
    },
    watch: {
        value(val) {
            this.currentValue = val;
            // this.clear();
        },
        currentValue(val) {
            // console.log('p-picker-vehicle.watch.currentValue: ');
            // if (val && val.length > 6) this.$store.commit(enums.DESELECT_VEHICLES_ALL, [val]);
            // this.$store.commit(enums.DESELECT_VEHICLES_ALL, [val]);
            // else this.$store.commit(enums.DESELECT_VEHICLES_ALL, []);
            this.$emit('input', val);
        },
        selectedVehicles(val) {
            if (!this.isCurrent) return;
            if (val && val.length) this.currentValue = val[0];
            else this.currentValue = '';
        }
    },
    created() {
        bus.on(`${this.$options.name}.clear`, this.clear);
        bus.on(`${this.$options.name}.closeBox`, this.closeBox);
    },
    mounted() {
        // this.$store.commit(enums.OPEN_BOX, 'pathsTable');
        this.init();
    },
    beforeDestroy() {
        bus.off(`${this.$options.name}.clear`, this.clear);
        bus.off(`${this.$options.name}.closeBox`, this.closeBox);
        this.clear();
    },
    methods: {
        async init() {
            // console.log('p-picker-vehicle.init: ', this);
            // let op = { label: $t('lang.pleaseSelect'), value: '' };
            this.clear();
            let res = await api.getLocalResources('models');
            if (!res || !res.list || !res.list.length) return;
            this.options = Chef.getModelsOptions(res.list);
            // this.options.unshift(op);
        },
        clear() {
            // console.log('p-picker-vehicle.clear: ', this.currentValue);
            this.isCurrent = false;
            // this.$store.commit(enums.DESELECT_VEHICLES, [this.currentValue]);
        },
        handelSelect(val) {
            console.log('handelSelect', val);
            // this.$store.commit(enums.CLOSE_BOX, 'vehiclesTable');
            // bus.emit('p-painter-vehicles.locateVehicle', val);
        },
        handelChange(val) {
            console.log('handelChange', val);
            // this.$store.commit(enums.CLOSE_BOX, 'vehiclesTable');
        },
        handlePicker() {
            let c = this.isCurrent;
            bus.emit('p-picker-path.clear');
            bus.emit('p-picker-range.clear');
            bus.emit(`${this.$options.name}.clear`);
            bus.emit(`p-picker-path.closeBox`);
            this.isCurrent = !c;
            if (this.isCurrent) this.$store.commit(enums.OPEN_BOX, 'vehiclesTable');
            else {
                this.clear();
            }
        },
        closeBox() {
            this.isCurrent = false;
            this.$store.commit(enums.CLOSE_BOX, 'pathsTable');
        },
        querySearch(queryString, cb) {
            let options = this.options;
            // let res = queryString ? options.filter(this.createrFilter(queryString)) : options;
            cb(options);
        },
        createrFilter(queryString) {
            return restaurant => {
                return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
            };
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.p-picker-vehicle {
    width: 100%;
    display: flex;
    position: relative;
    .icon-moreunfold {
        position: absolute;
        right: 25px;
        bottom: 4px;
    }
    .icon-target {
        flex: 1 1 auto;
        cursor: pointer;
        font-size: 18px;
        line-height: 22px;
        text-align: center;

        &.current {
            color: #ff0000;
            animation: blinker 500ms linear infinite;
        }
        @keyframes blinker {
            50% {
                opacity: 0.8;
                text-shadow: 0 0 6px #b54434;
            }
        }
    }

    select {
        height: 22px;
        font-size: 12px;
        line-height: 22px;
        padding: 2px 3px;
        border: 1px solid #dcdfe6;
        background: #ffffff;
    }
}
</style>
